<template>
    <div class="subpage">
       <My-head title="我的地址" :carthave="true" tclass='thead'>
       </My-head>

       <div v-if="addressList.length">
         <ul>
           <li v-for="(l, i) in addressList" :key="i">
             <input type="radio" name="ra">
            <div>
               <div class="a-top"> 
                <p>{{ l.name }}</p>
                <p> {{ l.tel }} </p>
                <p class="mo"> {{ l.isDefault ? '默认' : ''}} </p>
              </div>
              <p class="a-bm">
                <span> {{ l.province }}  {{ l.city }}  {{ l.county }} {{ l.addressDetail }} </span>
              </p>
            </div>
           </li>
         </ul>
       </div>

       <div v-else>
         <van-empty
        class="custom-image"
        image="https://m.welan.com/static/img/addressDefault.340170ab.png"
        description="暂无地址"
        />
       </div>

       <van-address-list
        default-tag-text="默认"
        @add="onAdd"
        />


    </div>
</template>

<script>
export default {
    data() {
        return {
            addressList: [],
            chosenAddressId: 1,
        }
    },
    methods: {
      getAddressList() {
        this.$ajax.getAddress({
        }).then((res) => {
          console.log(res);
          this.addressList = res
        })
      },
      onAdd() {
        this.$router.push( { name: 'addAdress' } )
      },
      // onEdit(item, index) {
      //   Toast('编辑地址:' + index);
      // },
    },
    mounted() {
      this.getAddressList()
    }
}
</script>

<style lang="scss">
.custom-image {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-70%);
    .van-empty__description {
        font-size: 16px;
    }
}

ul {
  background-color: rgb(248, 246, 246);
  li {
    display: flex;
    align-items: center;
    font-size: 14px;
    padding: 5px 15px;
    margin-bottom: 12px;
    background-color: white;
    input {
      margin-right: 10px;
    }
    .a-top {
      display: flex;
      align-items: center;
      margin-bottom: 8px;
      font-size: 16px;
      line-height: 22px;
      p {
        margin-right: 5px;
      }
      .mo {
        background-color: #ee0a24;
        // padding: 2px 5px;
        color: white;
        font-size: 10px;
        width: 32px;
        line-height: 16px;
        text-align: center;
        border-radius: 10px;
      }
    }
    .a-bm {
      font-size: 13px;
      line-height: 18px;
    }
  }
}

</style>